<template>
	<view class="list_h">
		<view class="label">
			<view class="xing">
				团队名称
			</view>
			<view>
				<input placeholder-style="color:#bbbbbb;font-size:28rpx" v-model="props.info.name"
					placeholder="请输入团队名称" />
			</view>
		</view>
		<view class="label">
			<view class="xing">
				团队简称
			</view>
			<view>
				<input placeholder-style="color:#bbbbbb;font-size:28rpx" v-model="props.info.abbreviation"
					placeholder="请输入团队名称" />
			</view>
		</view>
		<view class="label">
			<view class="xing">
				团队联系人
			</view>
			<view>
				<input placeholder-style="color:#bbbbbb;font-size:28rpx" v-model="props.info.team"
					placeholder="请输入团队联系人" />
			</view>
		</view>
		<view class="label">
			<view class="xing">
				联系电话
			</view>
			<view>
				<input placeholder-style="color:#bbbbbb;font-size:28rpx" v-model="props.info.mobile"
					placeholder="请输入联系电话" />
			</view>
		</view>
		<view class="label" v-if="infos.score">
			<view class="xing" style="min-width: 280rpx;">
				团队过往成绩
			</view>
			<view class="upload flex-wrap">
			  <view class="upload-item flex-center" style="border: none" v-for="(item,i) in info.score_imgs">
			    <image mode="aspectFill" class="img" :src="item" v-if="item"></image>
			    <image class="close" src="/static/icon/21.png" @click="deleteClick(i)" v-if="item"></image>
			  </view>
			  <view class="upload-item flex-center"  @click="uploadPic()">
			    <image class="add" src="/static/icon/16.png"></image>
			  </view>
			</view>
		</view>
	</view>
</template>

<script setup lang="ts">
	import tools from '@/utils/tools'
	const props = defineProps({
		info: {
			type: Object,
			default() {
				return {}
			}
		},
		infos:{
			type: Object,
			default() {
				return {}
			}
		}
	})
	
	// 上传图片（OSS）
	const uploadPic = (i: any) => {
	   
	  tools.chooseImage(1).then((res: string[]) => {
	    tools.getOssUrl<string[]>(res).then((url: any) => {
	      // if (i.value.length < (i.limit ?? 1)) return i.value.push(url)
	      // tools.showToast(`最多上传${i.limit ?? 1}张图片`)
		  props.info.score_imgs.push(url)
		  //console.log(url);
	    })
	  })
	}
	//删除图片
	const deleteClick = (i)=>{
		props.info.score_imgs.splice(i,1);
	}
 
</script>

<style lang="scss" scoped>
	.list_h {
		padding: 20rpx;
		border-radius: 20rpx;

		.label {
			display: flex;
			align-items: flex-start;
			border-bottom: 1px solid #d6d6cf;
			padding-bottom: 35rpx;
			padding-top: 35rpx;

			&:last-child {
				border: none;
				padding-bottom: 0rpx;
			}
		}

		.xing {
			width: 240rpx;
			height: 40rpx;
			font-size: 28rpx;

			&:before {
				content: '*';
				color: #e6425e;
				font-size: 28rpx;
				margin-left: 5rpx;
				margin-right: -6rpx;
			}
		}

		input {
			flex: 1;
			margin-left: 44rpx;
		}
	}

	.listDis {
		padding: 20rpx;
		border-radius: 20rpx;
		height: 280rpx;
		background: #FFFFFF;
	}
	.upload {
	  width: 100%;
	  //margin-left: 181rpx;
	  .upload-item {
	    width: 140rpx;
	    height: 140rpx;
	    border-radius: 6rpx;
	    border: 1px solid #ddd;
	    background-color: #fcfcfc;
	    margin-right: 15rpx;
	    margin-bottom: 10rpx;
	    position: relative;
	     
	    image {
	      border-radius: 6rpx;
	    }
	    .close {
	      right: 0;
	      top: 0;
	      width: 36rpx;
	      height: 36rpx;
	      position: absolute;
	    }
	    .add {
	      width: 52rpx;
	      height: 52rpx;
	    }
	  }
	}
</style>